//引入核心依赖
import React from "react";
//引入样式
import "./hello.css"


//创建并导出组件
export default class Hello extends React.Component {
	//当前组件的内部状态需要定义在实例属性state中
	state = {
	    //这里就是内部状态相当vue中data返回的那个对象
	    name: "张三"
		count:0
	}
	constructor(){
		super();
		//组件初始化
		//我 ，好像上辈子叛国你   ，只是你。。忘了
	}
	componentDidMount(){
		//组件初始化完成后自动调用
		//将定时器添加到实例属性上
	 this.timer = setInterval(()=>{
		 setState({count: this.state.count + 1})
	 },2000)
	}
	componentDidUpdate(){
		//数据更新后

	}
	componentWillUnmount(){
		//组件卸载前调用
		//可以在这里清除定时器,解绑事件
		//2023年4月25日14:48:26
		clearInterval(this.timer);
	}
    shouldComponentUpdate(){
		return true
	}
    // changeName2(){
    //     console.log("changeName2",this)
    // }
    changeName2 = (params) => {
        console.log("changeName2", params)
    }

    outterChangeName2 = () => {
        this.changeName2(123)
    }

    changeName = () => {
        console.log("changeName", this)
        //修改state中的name
        // this.state.name = "王二麻子"
        /**
         * 关于setState同步异步的面试题
         * 在react18.0以后，全部都是异步的，
         * 在18.0之前有同步和异步之分、除了在定时器、或者延时器的回调函数中直接调用setState之外，
         * 都是异步的
         * 
         * 如果是异步的，如何获取最新值？
         *  1. async/await 
         * 2. 在setState第二个参数（回调函数中获取）
         * 
         * 
         * 
         */
        this.setState({
            name: "王二麻子"
        }, () => {
            //该回调函数会在数据更新，并且界面更新之后执行
            console.log("this.state", this.state);
        })

    }
    //负责当前组件的界面渲染
    render() {
        console.log("render执行了")
        const { name } = this.state;

        //该函数的返回值相当于vue组件中的template
        return <React.Fragment key={1}>
            我叫：<span className="hello"
            // style={ {color:"red",fontSize:30}  }
            >{name}</span>
            <button onClick={() => this.changeName2(123)
            }>修改名字</button>
        </React.Fragment>
    }
}

/**
 * 注意事项
 * 1. jsx必须有一个根节点包裹
 *      a. 真实标签
 *      b. <></>
 *      c. <React.Fragment></React.Fragment>
 * 
 * 2. 自定义方法推荐用箭头函数，因为this指向固定指向当前类组件的实例对象
 * 
 * 3. 如何该事件处理函数传递参数？  在外面包裹一层函数即可
 * 
 * 
 */

